<template>
	<div class="tabel_Background">
		<div class="tabel_Background-wra">
			<div id="title">
				<span class="title-text">{{ title }}</span>
			</div>
			<div class="listhead listhead1">
				<span>井号</span>
				<span>小队编号</span>
				<span>当前深度(m)</span>
				<span>当前段号</span>
				<span>完井作业</span>
				<span>查看详情</span>
			</div>
			<vue-seamless-scroll :data="listData" class="seamless-warp listnav listnav1">
				<ul class="item">
					<li v-for="(item, i) in listData" :key="i">
						<span :key="i" v-if="item.work == '是'">
							<span><b>{{ item.wellName }}</b></span>
							<span><b>{{ item.team }}</b></span>
							<span><b>{{ item.depth }}</b></span>
							<span><b>{{ item.sec }}</b></span>
							<span style="color: #00aa00;"><b>是</b></span>
							<span style="color: #26beff;cursor: pointer;" @click="handleInfo(item.wellName)"><b>点击查看</b></span>
						</span>

						<span :key="i" v-else>
							<span><b>{{ item.wellName }}</b></span>
							<span><b>{{ item.team }}</b></span>
							<span><b>{{ item.depth }}</b></span>
							<span><b>{{ item.sec }}</b></span>
							<span style="color: #ff0606;"><b>否</b></span>
							<span style="color: gray;cursor: pointer;"><b>点击查看</b></span>
						</span>
					</li>
				</ul>
			</vue-seamless-scroll>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Ltable",
		props: {
			title: String
		},

		methods: {
			handleInfo(val) {
				this.$router.replace("/Item");
			}
		},
		data() {
			return {
				listData: [{
						team: "C3402",
						wellName: "威204H11-4",
						depth: "5310",
						sec: "第二段",
						work: "是"
					},
					{
						team: "C3402",
						wellName: "威204H11-5",
						depth: "5190",
						sec: "第十一段",
						work: "是"
					},
					{
						team: "C3403",
						wellName: "威204H11-5",
						depth: "5190",
						sec: "第十一段",
						work: "否"
					},
					{
						team: "C3404",
						wellName: "威204H11-6",
						depth: "4813",
						sec: "第十二段",
						work: "是"
					},
					{
						team: "C3405",
						wellName: "威202H11-4",
						depth: "4050",
						sec: "第十二段 ",
						work: "是"
					},
					{
						team: "C3406",
						wellName: "威202H11-4",
						depth: "3452",
						sec: "第十二段",
						work: "是"
					},
					{
						team: "C3408",
						wellName: "威202H11-4",
						depth: "3745",
						sec: "第八段",
						work: "否"
					},
					{
						team: "C3411",
						wellName: "威202H11-5",
						depth: "3006",
						sec: "第十九段",
						work: "否"
					},
					{
						team: "C3417",
						wellName: "威202H11-6",
						depth: "3293",
						sec: "第十六段",
						work: "否"
					},
					{
						team: "C3400",
						wellName: "威202H13-5",
						depth: "3116",
						sec: "第二十八段",
						work: "否"
					},
					{
						team: "C3418",
						wellName: "威202H13-6",
						depth: "4435",
						sec: "第二段",
						work: "是"
					},
					{
						team: "C3420",
						wellName: "威202H13-8",
						depth: "2835",
						sec: "第二十五段",
						work: "否"
					},
					{
						team: "C3419",
						wellName: "威204H10-2",
						depth: "4654",
						sec: "第七段",
						work: "否"
					},
					{
						team: "C3422",
						wellName: "威204H10-3",
						depth: "3803",
						sec: "第二十段",
						work: "是"
					},
					{
						team: "C3424",
						wellName: "威204H11-5",
						depth: "3685",
						sec: "第九段",
						work: "是"
					},
					{
						team: "C3424",
						wellName: "威页23-1HF",
						depth: "5118",
						sec: "第六段",
						work: "否"
					}
				]
			};
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	.seamless-warp {
		width: 95%;
		margin: 0 auto;
		overflow: hidden;
	}

	ul {
		list-style: none;
		padding: 0;
		margin: 0 auto;
	}

	li,
	b {
		display: block;
		height: 20px;
		line-height: 20px;
		display: flex;
		justify-content: space-between;
		font-size: 0.01rem;
	}

	.listhead {
		position: relative;
		margin: 0 auto;
		display: flex;
		width: 100%;
		height: 6%;
		justify-content: space-between;
		z-index: 1;
	}

	.listnav {
		height: 84%;
	}

	.listnav ul li {
		height: 50px;
		display: flex;
		justify-content: space-between;
	}

	.listhead span,
	.listnav li span {
		width: 100%;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.listhead1 span,
	.listnav1 li span {
		border-bottom: 1px solid #1a7396;
	}

	.listnav ul li span {
		height: 22px;
	}

	.listnav2 ul li:nth-child(odd) {
		background: #1f437e;
	}

	.listhead1 span {
		background-color: #0a3169;
		font-size: 2px;
		color: #07daff;
		font-weight: bold;
		// line-height: 22px;
		height: 100%;
	}

	.listhead2 span {
		font-size: 2px;
		color: #0a3169;
		/* border-bottom: 1px solid #0c2854; */
		font-weight: bold;
	}

	.tabel_Background {
		width: 100%; //3.02rem;
		min-width: 2.96rem;
		height: 100%;
		box-sizing: border-box;
	}

	.tabel_Background-wra {
		width: 100%; //3.02rem;
		min-width: 2.96rem;
		height: 100%;
		background-image: url("../assets/bg2.png");
		background-repeat: no-repeat;
		background-size: 100% 100%; // contain; // cover;
		padding: 2%;
		box-sizing: border-box;
	}

	#title {
		width: 27%;
		height: 8%;
		font-size: 8px;
		background-image: url("../assets/btn_leibie_pressed@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 3%;
	}

	.title-text {
		color: #21beeb;
		font-weight: bold;
		font-size: 20px;
	}
</style>
